<template>
  <dialog ref="dialog"
    class="rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 sm:max-w-lg sm:w-full p-4">
    <dl class="divide-y divide-gray-100">
      <dt class="text-lg font-medium text-gray-900 py-2 border-b border-gray-200">{{ title }}</dt>
      <dd class="py-4">
        <slot>{{ $props.msg }}</slot>
      </dd>
      <dd class="pt-4 flex justify-end space-x-3">
        <slot name="footer" :cb_cancle="cancel_click" :cb_submit="submit_click" :cancel_label="cancel_label"
          :submit_label="submit_label">
          <button @click="cancel_click" class="px-4 py-2 bg-gray-100 text-gray-700 rounded hover:bg-gray-200">
            {{ cancel_label }}
          </button>
          <button @click="submit_click" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
            {{ submit_label }}
          </button>
        </slot>
      </dd>
    </dl>
  </dialog>
</template>
<script setup lang="ts">
import { computed, onMounted, ref, useTemplateRef } from "vue";

let dialog = useTemplateRef<HTMLDialogElement>('dialog')
// let submit_label=ref('提交')
// let cancel_label=ref('取消')

const props = defineProps<{
  title?: string
  msg?: string
  submit_label?: string
  cancel_label?: string
  size?: 'xl' | 'lg' | 'sm'
}>()

let title = computed(() => {
  return props.title ?? '提示'
})
let submit_label = computed(() => {
  return props.submit_label ?? '确认'
})
let cancel_label = computed(() => {
  return props.cancel_label ?? '取消'
})
const emit = defineEmits<{
  close: []
  cancel: []
  submit: []
}>()

onMounted(() => {
  // submit_label.value=props.submit_label??submit_label.value
  // cancel_label.value=props.cancel_label??cancel_label.value
  dialog.value?.addEventListener('close', () => {
    emit('close')
  })
})

function submit_click() {
  emit('submit')
}
function cancel_click() {
  emit('cancel')
}
function open() {
  dialog.value?.showModal()
}
function close() {
  dialog.value?.close()
}
defineExpose({
  open,
  close
})
</script>



<style scoped></style>